<!--
 *@开发者: 刘翔
 *@创建时间: 2024-04-26 16:34:13
 *@描述:病组超支结余情况
!-->
<template>
  <div class="page-title-18">
    <div class="page-title-18-top">
      <div class="page-title-18-top-form">
        <formList topHeightValue="40%" bottomHeightValue="60%" :formParameter="formParameter" :data_list="data_list" />
      </div>
      <div class="page-title-18-top-box">
        <div ref="pageTitle18topContentRefs" class="page-title-18-top-content"></div>
      </div>
    </div>
    <div class="page-title-18-center">
      <div ref="pageTitle18CenterEcharts1" class="page-title-18-center-echarts-1"></div>
      <div ref="pageTitle18CenterEcharts2" class="page-title-18-center-echarts-2"></div>
    </div>
    <div class="page-title-18-bottom">
      <span v-html="card1.text1"></span>
    </div>
  </div>
</template>

<script>
import formList from '../components/formList/formList';
import * as echarts from 'echarts';

export default {
  // 组件名称
  name: 'pageTile18',
  // 组件参数 接收来自父组件的数据
  props: {},
  // 局部注册的组件
  components: {
    formList,
  },
  // 组件状态值
  data() {
    return {
      card1: {},
      data_list: [],
      formParameter: [
        { width: '25%', title: '超支结余情况' },
        { width: '10%', title: '病组数' },
        { width: '10%', title: '病例数' },
        { width: '15%', title: '病例数占比' },
        { width: '20%', title: '例均超支结余' },
        { width: '20%', title: '超支结余(万元)' },
      ],
    };
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 组件方法
  methods: {
    init(data) {
      let data_list = data.data_list;
      let data_list2 = data.data_list2;
      let data_list3 = data.data_list3;
      let desc = data.desc;
      //饼图
      this.echartsInit(data_list);
      //DRG超支情况
      this.echartsInit2(data_list2);
      //DRG结余情况
      this.echartsInit3(data_list3);
      //内容
      this.cardData(desc);
    },
    // 饼图
    echartsInit(data_list) {
      this.data_list = data_list;
      let myChart = echarts.init(this.$refs.pageTitle18topContentRefs);
      let option;
      option = {
        series: [
          {
            name: '饼图',
            type: 'pie',
            radius: ['0%', '75%'],
            data: [],
            label: {
              formatter: function (data) {
                let formatterData = data.data;
                return formatterData.name + formatterData.num + '个 ' + formatterData.value + '%';
              },
            },
          },
        ],
      };
      data_list.forEach(item => {
        if (item['超支结余情况'] !== '汇总')
          option.series[0].data.push({
            value: item['病例数占比'].split('%')[0],
            name: item['超支结余情况'],
            num: item['病组数'],
            itemStyle: { color: item['超支结余情况'] === '超支病组' ? '#f9978a' : '#4874cb' },
          });
      });
      option && myChart.setOption(option);
    },
    // DRG超支情况
    echartsInit2(data_list) {
      let myChart = echarts.init(this.$refs.pageTitle18CenterEcharts1);
      let option;
      option = {
        title: {
          text: 'DRG超支TOP5',
          top: '5%',
          left: '50%',
        },
        legend: {
          show: false,
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01],
        },
        yAxis: {
          type: 'category',
          data: [],
          barMaxWidth: 50,
          axisLabel: {
            show: true,
            fontSize: 18,
            color: '#000',
            formatter: function (value, index) {
              let textValue = option.yAxis.data[index].BZId + '-' + option.yAxis.data[index].BZName;
              var maxLength = 10; // 每行显示的最大字符数
              var result = '';
              for (var i = 0; i < textValue.length; i++) {
                result += textValue[i];
                if ((i + 1) % maxLength === 0) {
                  result += '\n'; // 每maxLength字符换行
                }
              }
              return result;
            },
          },
        },
        series: [
          {
            name: '合计盈亏(万元)',
            type: 'bar',
            data: [],
            barMaxWidth: 50,
            itemStyle: {
              color: '#ee6666',
            },
            label: {
              show: true,
              fontSize: 18,
              formatter: '{c}万',
            },
          },
        ],
      };
      data_list.forEach(item => {
        option.series[0].data.unshift(item['合计盈亏(万元)']);
        option.yAxis.data.unshift({
          BZName: item['病组名称'],
          BZId: item['病组编码'],
        });
      });
      option.series[0].data.sort((a, b) => b - a);
      option && myChart.setOption(option);
    },
    // DRG结余情况
    echartsInit3(data_list) {
      let myChart = echarts.init(this.$refs.pageTitle18CenterEcharts2);
      let option;
      option = {
        title: {
          text: 'DRG结余TOP5',
          top: '5%',
          left: '50%',
        },
        legend: {
          show: false,
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01],
          axisLabel: {
            show: true,
            // fontSize: 18,
            color: '#8e8e8e',
          },
        },
        yAxis: {
          type: 'category',
          data: [],
          barMaxWidth: 50,
          axisLabel: {
            show: true,
            fontSize: 18,
            color: '#000',
            formatter: function (value, index) {
              let textValue = option.yAxis.data[index].BZId + '-' + option.yAxis.data[index].BZName;
              var maxLength = 10; // 每行显示的最大字符数
              var result = '';
              for (var i = 0; i < textValue.length; i++) {
                result += textValue[i];
                if ((i + 1) % maxLength === 0) {
                  result += '\n'; // 每maxLength字符换行
                }
              }
              return result;
            },
          },
        },
        series: [
          {
            name: '合计盈亏(万元)',
            type: 'bar',
            data: [],
            barMaxWidth: 50,
            label: {
              show: true,
              fontSize: 18,
              formatter: '{c}万',
            },
          },
        ],
      };
      data_list.forEach(item => {
        option.series[0].data.unshift(item['合计盈亏(万元)']);
        option.yAxis.data.unshift({
          BZName: item['病组名称'],
          BZId: item['病组编码'],
        });
      });
      option.series[0].data.sort((a, b) => a - b);
      option && myChart.setOption(option);
    },
    //卡片内容
    cardData(desc) {
      this.card1 = {
        text1: desc,
      };
    },
  },
  created() {},
  mounted() {},
};
</script>

<style lang="less" scoped>
.page-title-18 {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  .page-title-18-top {
    display: flex;
    align-items: center;
    height: 30%;
    .page-title-18-top-form {
      width: 60%;
      height: 100%;
    }
    .page-title-18-top-box {
      width: 40%;
      height: 100%;
      .page-title-18-top-content {
        margin: auto;
        width: 60%;
        height: 100%;
        background: #dae3f5;
        border-radius: 32px;
        border: 1px solid #6086d2;
        box-shadow: 0 0 2px 2px #6086d2;
      }
    }
  }
  .page-title-18-center {
    display: flex;
    height: 60%;
    .page-title-18-center-echarts-1,
    .page-title-18-center-echarts-2 {
      width: 50%;
      height: 100%;
    }
  }
  .page-title-18-bottom {
    margin: 0 20px;
    padding: 2%;
    display: flex;
    align-items: center;
    font-size: 1.7rem;
    height: 10%;
    line-height: 40px;
    background: #fff2ca;
    border-radius: 16px;
    border: 1px solid #000;
    .color-tips {
      color: #ff1310;
    }
  }
}
</style>
